<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
    /* border: 1px solid #000; */
    padding: 0;
    margin: 0;
}
.box1{
    width: 600px;
    height: 400px;
    padding: 10px;
    border: 15px solid lightblue;
    position: relative;
}
.box2{
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 30px solid lightgreen;
    /* position: relative; */
}
.box3{
    width: 150px;
    height: 80px;
    padding: 30px;
    border: 5px solid lightpink;
}
</style>
</head>
<body>
    
<div class="box1">
    box1
    <div class="box2">
        box2
        <div class="box3">box3</div>
    </div>
</div>

<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');

// offset系列属性：

// offsetWidth 返回元素在页面中的宽度（包含width+padding+border）
// console.log( box3.offsetWidth );// 220

// offsetHeight 返回元素在页面中的高度（包含height+padding+border）
// console.log( box3.offsetHeight );// 150

// offsetParent 返回距离元素最近的定位父级(设置了定位的父级)
// console.log( box3.offsetParent );// ?
// console.log( box3.offsetParent.offsetParent );// ?
// console.log( document.body.offsetParent );// null

// offsetLeft 返回元素左侧到最近的定位父级边框内侧的距离
// offsetLeft 返回元素左侧到offsetParent边框内侧的距离
// console.log( box3.offsetLeft );

// offsetTop 返回元素顶部到最近的定位父级边框内侧的距离
// offsetTop 返回元素顶部到offsetParent边框内侧的距离
// console.log( box3.offsetTop );

// 假设box3外层的所有父元素都设置了定位，如何获取box3到最外层的距离？
// var num = box3.clientLeft + box3.offsetLeft
//          + box3.offsetParent.clientLeft + box3.offsetParent.offsetLeft
//           + box3.offsetParent.offsetParent.clientLeft + box3.offsetParent.offsetParent.offsetLeft;
// console.log( num );// 80

// 封装函数：获取元素到页面左侧和顶部的距离
function offset(dom){
    // dom -> box3
    var left = 0 - dom.clientLeft;// 累加左侧的距离
    var top = 0 - dom.clientTop;// 累加顶部的距离
    while(dom){// dom -> box3 -> box2 -> box1 -> body -> null
        left += dom.clientLeft + dom.offsetLeft
        top += dom.clientTop + dom.offsetTop
        dom = dom.offsetParent;
    }
    return {'left':left,'top':top}
}
console.log( offset(box3).top );

</script>
</body>
</html>